import React from 'react';
import { Tooltip } from 'antd';
import PropTypes from 'prop-types';
import _ from 'lodash';
import './index.less';

const Top10Risk = props => {
  let { data = [], jump } = props;

  let sliceLen = 10 - data.length;
  for (let i = 0; i < sliceLen; i++) {
    data.push({ risk: 0, ip: '暂无数据' });
  }

  const getRiskIconCls = value => {
    if (value >= 0 && value <= 3) {
      return 'low';
    } else if (value > 3 && value <= 6) {
      return 'middle';
    } else if (value > 6 && value < 10) {
      return 'high';
    } else if (value === 10) {
      return 'fatal';
    }
  };

  const getTooltip = value => {
    const ip = _.get(value, 'ip', '');
    const url = _.get(value, 'url', '');
    const risk = _.get(value, 'risk', '');
    return (
      <div>
        <div>IP: {ip}</div>
        {url && <div>URL: {url}</div>}
        <div>风险值: {risk}分</div>
      </div>
    );
  };

  const getRiskIpUrl = value => {
    const ip = _.get(value, 'ip', '');
    const url = _.get(value, 'url', '');
    return (
      <div className={!url && 'large-font'}>
        <div>{ip}</div>
        <div className="risk-content-url">{url}</div>
      </div>
    );
  };

  return (
    <div className="map-top10-risk">
      {data.map(i => {
        const risk = _.get(i, 'risk', '');
        return (
          <div
            className={`risk-item ${getRiskIconCls(risk)}`}
            key={_.get(i, '_id')}
            onClick={() => _.get(i, 'ip') !== '暂无数据' && jump(i)}
          >
            <Tooltip title={risk && getTooltip(i)} overlayClassName="top10-risk-tooltip">
              <div className="risk-content">{getRiskIpUrl(i)}</div>
            </Tooltip>
            <div className="risk-score">
              {risk || '0.0'}
              <span>分</span>
            </div>
          </div>
        );
      })}
    </div>
  );
};

Top10Risk.propTypes = {
  data: PropTypes.array,
  jump: PropTypes.func
};

export default Top10Risk;
